/* eslint-disable prefer-promise-reject-errors */
// 忘记密码
import React from 'react';
import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { Input, Form, Button, message, Modal } from 'antd';
import {
  UnlockOutlined,
  MailOutlined,
  SafetyCertificateOutlined,
} from '@ant-design/icons';
import * as loginApi from '~/apis/login/loginApi';

const FormItem = Form.Item;

export const ResetModal = observer((props: any) => {
  const [form] = Form.useForm();
  const state = props.state;
  // reset
  const onReset = (values: any) => {
    const params = {
      code: values.verificationCode,
      password: values.password,
    };
    loginApi.reset(params).then(() => {
      message.success('Modified success');
      state.visible = false;
    }).catch(() => {
      message.error('Modified fail');
    });
  };

  const sendVerification = () => {
    const params = {
      receiversEmail: form.getFieldValue('email'),
    };
    loginApi.sendEmail(params).then(() => {
      message.success('send success');
    }).catch(() => {
      message.error('send fail');
    });
  };

  const handleCancel = action(() => {
    state.visible = false;
  });

  return (
    <Modal
      title="RESET"
      visible={state.visible}
      onCancel={handleCancel}
      width='380px'
      footer={null}
    >
      <Form className="login-wrap" form={form} onFinish={onReset}>
        <FormItem
          name="email"
          rules={[
            { required: true, message: 'Please input your E-mail!' },
            { type: 'email', message: 'The input is not valid E-mail!' },
          ]}
        >
          <Input
            size="large"
            allowClear
            type="text"
            placeholder="Email"
            prefix={<MailOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          name="verificationCode"
          rules={[{ required: true, message: 'Please input your Verification Code!' }]}
        >
          <Input
            size="large"
            type="text"
            placeholder="Verification Code"
            prefix={<SafetyCertificateOutlined className="prefix-icon"/>}
            suffix={<a className="ant-dropdown-link" onClick={sendVerification}>Send</a>}
          />
        </FormItem>
        <FormItem
          className="mb-4"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input
            size="large"
            allowClear
            placeholder="Password,6-20 characters"
            type="password"
            prefix={<UnlockOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <FormItem
          className="mb-4"
          name="password1"
          rules={[
            { required: true, message: 'Please confirm the password again!' },
            ({ getFieldValue }) => ({
              validator(_rule, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject('The two passwords that you entered do not match!');
              },
            }),
          ]}
        >
          <Input
            size="large"
            allowClear
            placeholder="Confirmed password"
            type="password"
            prefix={<UnlockOutlined className="prefix-icon"/>}
          />
        </FormItem>
        <div className="mb-4">
          <Button className="w-full" size="large" type="primary" htmlType="submit">Reset</Button>
        </div>
        <a className="link" onClick={() => { state.visible = false; }}>Return to login</a>
      </Form>
    </Modal>
  );
});
